<template>
	<div class="zheng">
		<div class="memberinfo"></div>
		<div class="cont">
			<el-carousel
				:autoplay="false"
				arrow="always"
				height="565px"
				indicator-position="none"
				:loop="false"
				ref="carousel"
				@change="carouselChange"
			>
				<!-- 封面 -->
				<el-carousel-item>
					<div class="fengmian">
						<div class="ftitle">中国共产党党员活动证</div>
						<img
							src=""
							alt=""
						/>
					</div>
				</el-carousel-item>
				<!-- 入党誓词 -->
				<el-carousel-item>
					<div class="wrapper">
						<div class="l page"></div>
						<div class="line"></div>
						<div class="r page">
							<div
								class="contenttitle"
								style="
									letter-spacing: 17px;
									padding: 47px 0 30px;
									margin: 0;
								"
							>
								入党誓词
							</div>
							<div class="contcontent">
								{{ rudangshici }}
							</div>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 个人信息 -->
				<el-carousel-item>
					<div class="wrapper msg">
						<div class="l page">
							<img src="" alt="" class="avatar" />
							<div style="margin-top: 20px">
								基层党（工）委名称
							</div>
							<div>中国共产党兴平市委组织部委员会</div>
							<div style="margin-top: 20px">编号</div>
							<el-input
								placeholder="请输入编号"
								prefix-icon="el-icon-edit"
								@blur="() => {}"
							></el-input>
							<div
								style="
									margin-top: 20px;
									display: flex;
									justify-content: space-between;
								"
							>
								<span>发证日期</span>
								<span>{{ today }}</span>
							</div>
						</div>
						<div class="line"></div>
						<div class="r page">
							<div>
								<span>姓名</span>
								<span>张真</span>
								<span>性别</span>
								<span>男</span>
								<span>民族</span>
								<span>汉族</span>
							</div>
							<div>
								<span>出生年月</span>
								<span>1990-02-01</span>
							</div>
							<div>
								<span>文化程度</span>
								<span>大学</span>
							</div>
							<div>
								<span>入党时间</span>
								<span>2019-12-11</span>
							</div>
							<div>
								<span>身份证号码</span>
								<span>410111199002014455</span>
							</div>
							<div>
								<span>联系电话</span>
								<span>13333333333</span>
							</div>
							<div>
								<span>工作单位及职务</span>
								<span>其他从业人员</span>
							</div>
							<div>
								<span>所在党支部</span>
								<span>中国共产党兴平市委组织部委员会</span>
							</div>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 参与组织生活记录 -->
				<el-carousel-item>
					<div class="wrapper orglife">
						<div class="l page">
							<div class="contenttitle">参与组织生活记录</div>
							<table border="1">
								<tr>
									<td style="width: 100px">日 期</td>
									<td style="width: 150px">内 容</td>
									<td style="width: 120px">
										党支部盖章或<br />支部书记签章
									</td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</table>
						</div>
						<div class="line"></div>
						<div class="r page">
							<div class="contenttitle">参与组织生活记录</div>
							<table border="1">
								<tr>
									<td style="width: 100px">日 期</td>
									<td style="width: 150px">内 容</td>
									<td style="width: 120px">
										党支部盖章或<br />支部书记签章
									</td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</table>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 缴纳党费记录 -->
				<el-carousel-item>
					<div class="wrapper fee">
						<div class="l page">
							<div class="contenttitle" style="margin-bottom: 0">
								缴纳党费记录
							</div>
							<table border="1">
								<tr>
									<td style="width: 60px; height: 45px">
										年
									</td>
									<td style="width: 100px">
										交纳党费<br />金额(元)
									</td>
									<td style="width: 100px">交款日期</td>
									<td style="width: 100px">
										收款人<br />签 章
									</td>
								</tr>
								<tr v-for="(item, index) in 12" :key="index">
									<td>{{ item }}月</td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</table>
						</div>
						<div class="line"></div>
						<div class="r page">
							<div class="contenttitle" style="margin-bottom: 0">
								缴纳党费记录
							</div>
							<table border="1">
								<tr>
									<td style="width: 60px; height: 45px">
										年
									</td>
									<td style="width: 100px">
										交纳党费<br />金额(元)
									</td>
									<td style="width: 100px">交款日期</td>
									<td style="width: 100px">
										收款人<br />签 章
									</td>
								</tr>
								<tr v-for="(item, index) in 12" :key="index">
									<td>{{ item }}月</td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</table>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 奖惩情况记录 -->
				<el-carousel-item>
					<div class="wrapper zuoyong">
						<div class="l page">
							<div class="contenttitle">奖惩情况记录</div>
							<div class="contentwrapper">
								<div class="contenttop">{{}}</div>
								<div class="contentbottom">
									<div class="bottomleft">
										党支部盖章或<br />支部书记签章：
									</div>
									<div class="bottomright">年 月 日</div>
								</div>
							</div>
						</div>
						<div class="line"></div>
						<div class="r page">
							<div class="contenttitle">奖惩情况记录</div>
							<div class="contentwrapper">
								<div class="contenttop">{{}}</div>
								<div class="contentbottom">
									<div class="bottomleft">
										党支部盖章或<br />支部书记签章：
									</div>
									<div class="bottomright">年 月 日</div>
								</div>
							</div>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 发挥作用情况记录 -->
				<el-carousel-item>
					<div class="wrapper zuoyong">
						<div class="l page">
							<div class="contenttitle">发挥作用情况记录</div>
							<div class="contentwrapper">
								<div class="contenttop">{{}}</div>
								<div class="contentbottom">
									<div class="bottomleft">
										党支部盖章或<br />支部书记签章：
									</div>
									<div class="bottomright">年 月 日</div>
								</div>
							</div>
						</div>
						<div class="line"></div>
						<div class="r page">
							<div class="contenttitle">发挥作用情况记录</div>
							<div class="contentwrapper">
								<div class="contenttop">{{}}</div>
								<div class="contentbottom">
									<div class="bottomleft">
										党支部盖章或<br />支部书记签章：
									</div>
									<div class="bottomright">年 月 日</div>
								</div>
							</div>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 党员义务 -->
				<el-carousel-item>
					<div class="wrapper partyright">
						<div class="l page">
							<div class="contenttitle">党员义务</div>
							<p v-for="item in dangyuanyiwu[0]">
								{{ item }}
							</p>
						</div>
						<div class="line"></div>
						<div class="r page">
							<p
								v-for="(item, index) in dangyuanyiwu[1]"
								:key="index"
								:style="index == 0 ? 'text-indent: 0' : ''"
							>
								{{ item }}
							</p>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 党员权利 -->
				<el-carousel-item>
					<div class="wrapper partyright">
						<div class="l page">
							<div class="contenttitle">党员权利</div>
							<p v-for="item in dangyuanquanli[0]">
								{{ item }}
							</p>
						</div>
						<div class="line"></div>
						<div class="r page">
							<p v-for="item in dangyuanquanli[1]">
								{{ item }}
							</p>
						</div>
					</div>
				<div class="pagebox">
					<div class="l">· 1 ·</div>
					<div class="r">· 2 ·</div>
				</div>
				</el-carousel-item>
				<!-- 封底 -->
				<el-carousel-item>
					<div class="fengdi"></div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="step">
			<el-steps :active="step" align-center>
				<el-step
					v-for="(item, index) in steps"
					:key="index"
					:title="item"
					@click.native="stepChange(index)"
					process-status="finish"
				></el-step>
			</el-steps>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			steps: [
				'封面',
				'入党誓词',
				'个人信息',
				'参与组织生活记录',
				'缴纳党费记录',
				'奖惩情况记录',
				'发挥作用情况记录',
				'党员义务',
				'党员权利',
				'封底',
			],
			step: 1,
			rudangshici:
				'我志愿加入中国共产党，拥护党的纲领，遵守党的章程，履行党员义务，执行党的决定，严守党的纪律，保守党的秘密，对党忠诚，积极工作，为共产主义奋斗终身，随时准备为党和人民牺牲一切，永不叛党。',
			dangyuanyiwu: [
				[
					'（一）认真学习马克思列宁主义、毛泽东思想、邓小平理论、“三个代表”重要思想、科学发展观、习近平新时代中国特色社会主义思想，学习党的路线、方针、政策和决议，学习党的基本知识和党的历史，学习科学、文化、法律和业务知识，努力提高为人民服务的本领。',
					'（二）增强“四个意识”、坚定“四个自信”、做到“两个维护”，贯彻执行党的基本路线和各项方针、政策，带头参加改革开放和社会主义现代化建设，带动群众为经济发展和社会进步艰苦奋斗，在生产、工作、学习和社会生活中起先锋模范作用。',
					'（三）坚持党和人民的利益高于一切，个人利益服从党和人民的利益，吃苦在前，享受在后，克己奉公，多做贡献。',
					'（四）自觉遵守党的纪律，首先是党的政治纪',
				],
				[
					'律和政治规矩，模范遵守国家的法律法规，严格保守党和国家的秘密，执行党的决定，服从组织分配，积极完成党的任务。',
					'（五）维护党的团结和统一，对党忠诚老实，言行一致，坚决反对一切派别组织和小集团活动，反对阳奉阴违的两面派行为和一切阴谋诡计。',
					'（六）切实开展批评和自我批评，勇于揭露和纠正违反党的原则的言行和工作中的缺点、错误，坚决同消极腐败现象作斗争。',
					'（七）密切联系群众，向群众宣传党的主张，遇事同群众商量，及时向党反映群众的意见和要求，维护群众的正当利益。',
					'（八）发扬社会主义新风尚，带头实践社会主义核心价值观和社会主义荣辱观，提倡共产主义道德，弘扬中华民族传统美德，为了保护国家和人民的利益，在一切困难和危险的时刻挺身而出，英勇斗争，不怕牺牲。',
				],
			],
			dangyuanquanli: [
				[
					'（1）参加党的有关会议，阅读党的有关文件，接受党的教育和培训。',
					'（2）在党的会议上和党报党刊上，参加关于党的政策问题的讨论。',
					'（3）对党的工作提出建议和倡议。',
					'（4）在党的会议上有根据地批评党的任何组织和任何党员，向党负责地揭发、检举党的任何组织和任何党员违法乱纪的事实，要求处分违法乱纪的党员，要求罢免或撤换不称职的干部。',
					'（5）行使表决权、选举权，有被选举权。',
					'（6）在党组织讨论决定对党员的党纪处分或作出鉴定时，本人有权参加和进行申辩，其他党员可以为他作证和辩护。',
					'（7）对党的决议和政策如有不同意见，在坚决执行的前提下，可以声明保留，并且可以把自己的意见向党的上级组织直至中央提出。',
				],
				[
					'（8）向党的上级组织直至中央提出请求、申诉和控告，并要求有关组织给以负责的答复。',
				],
			],
			today: '',
		}
	},
	methods: {
		carouselChange(a) {
			this.step = a + 1
		},
		stepChange(index) {
			this.step = index + 1
			this.$refs.carousel.setActiveItem(index)
		},
	},
	mounted() {
		const step = document.getElementsByClassName('el-step__icon-inner')
		for (let i = 0; i < step.length; i++) {
			step[i].innerText = ''
		}

		const date = new Date()
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		this.today = year + '年' + month + '月' + day + '日'
	},
}
</script>
<style lang="scss" scoped>
.zheng {
	padding: 24px 0;
	::v-deep .el-carousel__arrow {
		width: 64px;
		height: 64px;
		i {
			font-size: 50px;
		}
	}
	::v-deep .el-carousel__arrow--left {
		left: 100px;
	}
	::v-deep .el-carousel__arrow--right {
		right: 100px;
	}
	.pagebox{
		position: absolute;
		width:700px;
		height:30px;
		bottom:20px;
		left:calc(50% - 350px);
		padding:0 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
    font-weight: 400;
	}
	.fengmian {
		margin: 0 auto;
		width: 350px;
		height: 525px;
		background: rgb(224, 0, 17);
		box-shadow: rgb(145, 145, 145) 0px 3px 8px 3px;
		color: rgb(51, 51, 51);
		font-family: 宋体;
		border-radius: 2px 16px 16px 2px;
		overflow: hidden;
		position: relative;
		top: 20px;
		.ftitle {
			text-align: center;
			width: 286px;
			font-size: 38px;
			color: #f9c800;
			letter-spacing: 15px;
			margin: 85px auto 0;
			font-weight: 700;
			line-height: 1.5;
		}
		img {
			display: block;
			width: 100px;
			height: 100px;
			margin: 27px auto 0;
		}
	}
	.wrapper {
		background-color: #fff;
		margin: 0 auto;
		border-radius: 16px;
		box-shadow: 0 3px 8px 3px #919191;
		color: #333;
		overflow: hidden;
		position: relative;
		height: 525px;
		width: 700px;
		box-sizing: border-box;
		top: 20px;
		.page {
			width: 350px;
			height: 525px;
			position: absolute;
			font-family: 宋体;
			padding: 34px 20px;
		}
		.line {
			width: 0;
			height: 525px;
			border: dashed 1px #bdbdbd;
			position: absolute;
			left: 350px;
			top: 0;
		}
		.r {
			right: 0;
			box-sizing: border-box;
			.contcontent {
				font-size: 19px;
				text-indent: 38px;
				padding: 0 16px;
				line-height: 40px;
			}
		}

		.contenttitle {
			font-size: 24px;
			font-weight: 700;
			text-align: center;
			margin-bottom: 20px;
		}
		table {
			display: table-cell;
			vertical-align: inherit;
			unicode-bidi: isolate;
			font-family: 宋体;
			font-size: 14px;
			border-collapse: collapse;
		}
	}
	.msg {
		.l {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: 楷体;
			font-size: 18px;
			line-height: 1.5;
			.avatar {
				width: 150px;
				height: 210px;
			}
			div {
				width: 100%;
			}
			::v-deep .el-input__inner {
				border: none;
				border-radius: 0;
				border-bottom: solid 1px #333;
			}
		}
		.r {
			font-family: 楷体;
			font-size: 18px;
			line-height: 42px;
			div {
				span {
					&:nth-child(even) {
						font-family: 宋体;
						padding: 0px 12px;
						border-bottom: 1px solid rgb(51, 51, 51);
					}
				}
			}
		}
	}
	.orglife {
		.contenttitle {
			margin-bottom: 0;
		}
		td {
			text-align: center;
			height: 79px;
		}
	}
	.fee {
		.contenttitle {
			margin-bottom: 0;
		}
		td {
			text-align: center;
			height: 30px;
		}
	}
	.zuoyong {
		.contentwrapper {
			height: 385px;
			border: solid 1px #333;
			padding: 14px;
			box-sizing: border-box;
			.contenttop {
				height: 291px;
				overflow-y: auto;
			}
			.contentbottom {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				height: 70px;
				font-size: 14px;
			}
		}
	}
	.partyright {
		p {
			text-indent: 2em;
			line-height: 24px;
			font-size: 14px;
		}
	}
	.fengdi {
		margin: 0 auto;
		width: 350px;
		height: 525px;
		background: rgb(224, 0, 17);
		box-shadow: rgb(145, 145, 145) 0px 3px 8px 3px;
		color: rgb(51, 51, 51);
		border-radius: 16px 2px 2px 16px;
		overflow: hidden;
		position: relative;
		top: 20px;
	}
	.step {
		margin-top: 130px;
	}
	::v-deep .el-step {
		cursor: pointer;
		.el-step__title {
			font-size: 18px;
			font-weight: 700;
		}
		.el-step__icon {
			width: 30px;
			height: 30px;
			border-width: 4px;
		}
		.el-step__line {
			height: 4px;
			top: 14px;
			.el-step__line-inner {
				border-width: 2px !important;
			}
		}
		.is-process {
			color: #c0c4cc;
			.el-step__icon {
				border-color: #c0c4cc;
			}
		}
	}
}
</style>